<template>
  <a href="javascript:void(0);" @mouseenter="showSet" @mouseleave="hidSet" @click="toDetail">
    <div :class="'item ' + (active ? 'active' : '')">
      <ych-icon :type="item.icon || 'fork'" :class="color"/>
      <br><span class="item-name">{{item.name + '-v' + item.version}}</span>
      <ych-icon type="star" class="item-star" v-if="active && item.customId == null" @click="addCustom"/>
      <ych-icon type="star" theme="filled" class="item-star" v-if="active && item.customId != null" @click="delCustom"/>
    </div>
  </a>
</template>
<script>

  export default {
    name: 'ProcessCardList',
    props: {
      index: {
        type: Number,
        required: true,
      },
      item: {
        type: Object,
        required: true,
      }
    },
    data () {
      return {
        active: false,
        stop: false
      }
    },
    computed: {
      color () {
        const i = this.index % 5
        if (i == 0) {
          return 'color-a'
        } else if (i == 1) {
          return 'color-b'
        } else if (i == 2) {
          return 'color-c'
        } else if (i == 3) {
          return 'color-d'
        } else if (i == 4) {
          return 'color-e'
        }
        return ''
      }
    },
    methods: {
      showSet () {
        this.active = true
      },
      hidSet () {
        this.active = false
      },
      addCustom () {
        this.stop = true
        this.$emit('addCustom', this.item)
      },
      delCustom () {
        this.stop = true
        this.$emit('delCustom', this.item.customId)
      },
      toDetail () {
        if (this.stop) {
          this.stop = false
          return
        }
        this.$emit('toDetail', this.item.id)
      }
    },
  }
</script>
